<template>
  <el-card>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>CPI数据管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="10">
      <!-- <el-col :span="8">
        <el-input v-model="type" placeholder="请输入CPI类别名称查询" clearable @change="listPage()"></el-input>
      </el-col>
      <el-col :span="8">
        <el-input v-model="province" placeholder="请输入CPI所属省份名称查询" clearable @change="listPage()"></el-input>
      </el-col> -->
      <el-select v-model="type" placeholder="请选择CPI类别" clearable @change="listPage()">
          <el-option
            v-for="item in options_type"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
      </el-select>
      <el-select v-model="province" placeholder="请输入省份" clearable @change="listPage()">
          <el-option
            v-for="item in options_province"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
      </el-select>
    </el-row>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="90">
      </el-table-column>
      <el-table-column prop="cpi" label="CPI" width="100">
      </el-table-column>
      <el-table-column prop="type" label="CPI类别">
      </el-table-column>
      <el-table-column prop="province" label="省份">
      </el-table-column>
      <el-table-column prop="representTime" label="统计时间">
      </el-table-column>
      <el-table-column prop="updateTime" label="修改时间">
      </el-table-column>
      <el-table-column prop="updateId" label="修改人ID">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="点击修改" placement="bottom">
            <el-button type="warning" @click="openEditDialog(scope.row)" icon="el-icon-edit" circle></el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="点击删除" placement="bottom">
            <el-button @click="remove(scope.row)" type="danger" icon="el-icon-delete" circle></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pager.page"
      :page-sizes="[5, 10, 15, 20]" :page-size="pager.size" layout="total, sizes, prev, pager, next, jumper"
      :total="pager.total">
    </el-pagination>

    <el-dialog title="CPI数据修改" :show-close="false" :close-on-click-modal="false" :visible.sync="editDialogFlag">
      <el-form :model="cpi" :rules="rules" ref="cpi" label-width="formLabelWidth">
        <el-form-item label="CPI数值" :prop="cpiData">
          <el-input v-model="cpi.cpi" placeholder="请输入CPI数值"></el-input>
        </el-form-item>
        <el-select v-model="cpi.type" placeholder="请选择CPI类别">
            <el-option
              v-for="item in options_type"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
        </el-select>
        <el-select v-model="cpi.province" placeholder="请输入省份">
            <el-option
              v-for="item in options_province"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
        </el-select>
        <!-- <el-form-item label="CPI类型" :prop="type">
          <el-input v-model="cpi.type" placeholder="请输入CPI类型"></el-input>
        </el-form-item>
        <el-form-item label="CPI所属省份" :prop="province">
          <el-input v-model="cpi.province" placeholder="请输入CPI所属省份"></el-input>
        </el-form-item> -->
        <el-form-item label="时间" :prop="representTime">
          <el-input v-model="cpi.representTime" placeholder="请输入时间"></el-input>
        </el-form-item>
        <el-form-item label="修改人ID" :prop="updateId">
          <el-input v-model="cpi.updateId" placeholder="请输入修改人ID"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFlag=!editDialogFlag">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>

  </el-card>

</template>

<script>
  export default {
    data() {
      return {
        rules:{
          cpiData:[
            { required: true, message: '请输入CPI数据', trigger: 'blur' },
          ],
          type:[
            { required: true, message: '请输入CPI类型', trigger: 'blur' },
          ],
          province:[
            { required: true, message: '请输入CPI所属省份', trigger: 'blur' },
          ],
          representTime:[
            { required: true, message: '请输入CPI所属时间', trigger: 'blur' },
          ],
          updateId:[
            { required: true, message: '请输入修改人ID', trigger: 'blur' },
          ]
        },
        cpi:{
          id:0,
          cpi:'',
          type:'',
          province:'',
          representTime:'',
          updateTime:'',
          updateId:''
        },
        addDialogFlag:false,
        editDialogFlag:false,
        cpiData:'',
        type: '',
        province:'',
        representTime:'',
        updateId:'',
        tableData: [],
        pager: {
          page: 1,
          size: 5,
          total: 0
        },
        options_type: [{
                  value: '居民消费价格指数',
                  label: '居民消费价格指数'
                }, {
                  value: '食品烟酒类',
                  label: '食品烟酒类'
                }, {
                  value: '衣着类',
                  label: '衣着类'
                }, {
                  value: '居住类',
                  label: '居住类'
                }, {
                  value: '生活用品及服务类',
                  label: '生活用品及服务类'
                }, {
                  value: '交通和通信类',
                  label: '交通和通信类'
                }, {
                  value: '教育文化和娱乐类',
                  label: '教育文化和娱乐类'
                }, {
                  value: '医疗保健类',
                  label: '医疗保健类'
                }, {
                  value: '其他用品和服务类',
                  label: '其他用品和服务类'
                }],
        options_province: [{
                      value: '全国',
                      label: '全国'
                    }, {
                      value: '北京市',
                      label: '北京市'
                    }, {
                      value: '天津市',
                      label: '天津市'
                    }, {
                      value: '河北省',
                      label: '河北省'
                    }, {
                      value: '山西省',
                      label: '山西省'
                    }, {
                      value: '内蒙古自治区',
                      label: '内蒙古自治区'
                    }, {
                      value: '辽宁省',
                      label: '辽宁省'
                    }, {
                      value: '吉林省',
                      label: '吉林省'
                    }, {
                      value: '黑龙江省',
                      label: '黑龙江省'
                    }, {
                      value: '上海市',
                      label: '上海市'
                    }, {
                      value: '江苏省',
                      label: '江苏省'
                    }, {
                      value: '浙江省',
                      label: '浙江省'
                    }, {
                      value: '安徽省',
                      label: '安徽省'
                    }, {
                      value: '福建省',
                      label: '福建省'
                    }, {
                      value: '江西省',
                      label: '江西省'
                    }, {
                      value: '山东省',
                      label: '山东省'
                    }, {
                      value: '河南省',
                      label: '河南省'
                    }, {
                      value: '湖北省',
                      label: '湖北省'
                    }, {
                      value: '湖南省',
                      label: '湖南省'
                    }, {
                      value: '广东省',
                      label: '广东省'
                    }, {
                      value: '广西壮族自治区',
                      label: '广西壮族自治区'
                    }, {
                      value: '海南省',
                      label: '海南省'
                    }, {
                      value: '重庆市',
                      label: '重庆市'
                    }, {
                      value: '四川省',
                      label: '四川省'
                    }, {
                      value: '贵州省',
                      label: '贵州省'
                    }, {
                      value: '云南省',
                      label: '云南省'
                    }, {
                      value: '西藏自治区',
                      label: '西藏自治区'
                    }, {
                      value: '陕西省',
                      label: '陕西省'
                    }, {
                      value: '甘肃省',
                      label: '甘肃省'
                    }, {
                      value: '青海省',
                      label: '青海省'
                    }, {
                      value: '宁夏回族自治区',
                      label: '宁夏回族自治区'
                    }, {
                      value: '新疆维吾尔自治区',
                      label: '新疆维吾尔自治区'
                    }],
      }
    },
    methods: {
      openAddDialog(){
        this.addDialogFlag=!this.addDialogFlag;
      },
      openEditDialog(row){
        this.cpi = row;
        this.editDialogFlag=!this.editDialogFlag;
      },
      update(){
        this.$refs['cpi'].validate(valid=>{
          if(valid){
            this.$http.post('apis/cpi/update', this.cpi)
            .then(res=>{
              if(res.data.code==200){
                this.$message({
                  message:res.data.message,
                  type:'success'
                })
                this.editDialogFlag=!this.editDialogFlag;
                this.listPage()
              }
            }).catch(error=>{
              this.$message.error('网络异常')
            })
          }
        })
      },
      remove(row){
        this.$http.post('apis/cpi/remove?id='+row.id)
        .then(res=>{
          if(res.data.code==200){
            this.$message({
              message:res.data.message,
              type:'success'
            })
            this.listPage()
          }
        }).catch(error=>{
          this.$message.error('网络异常')
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pager.size = val;
        this.listPage();
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pager.page = val;
        this.listPage();
      },
      listPage() {
        this.$http.get('apis/cpi/listPage', {
          params: {
            page: this.pager.page,
            size: this.pager.size,
            type: this.type,
            province: this.province
          }
        }).then(res => {
          console.log(res)
          this.tableData = res.data.data;
          this.pager.total = res.data.count;
        }).catch(error=>{
          this.$message.error('网络异常')
        })
      }
    },
    created() {
      this.listPage();
    }
  }
</script>

<style scoped>
  .el-breadcrumb {
    padding-bottom: 20px;
  }

  .el-pagination {
    padding-top: 10px;
  }
</style>
